<template>
  <div class="container">

    <div class="one">
      <textarea  class="ask" v-model="request"></textarea>
      <button @click="msg" :disabled='disabled'>发送</button>
    </div>
   
    
      <div class="two" v-for='item in talkList'>
        <div v-if='talkList!==0'>
        <div class="request">{{ item.requestKey }}</div>
        <div class="response">{{ item.responseValue }}</div>
      </div>
    </div>
  </div>

  
</template>

<script>

export default {
  name: 'HelloWorld',
  
  data(){
    return{
      response:"",
      token:"",
      request:"",
      disabled:false,
      talkList:[]
      

    }
  },
  methods: {
    msg(req){
      let that=this
      that.disabled=true
     
     
      console.log(that.token)
      let ruleForm={
        token:that.token,
        request:that.request
      }
 
      this.$axios.post('api/chatglm',ruleForm).then(res => {
             that.response=res.data.response

              that.talkList.unshift({requestKey:that.request,responseValue:that.response})
              that.request=''
              that.disabled=false
            })
    }
  }, 
    mounted(){
      const timeData=new Date()
      const randomData=Math.random()
      this.token=timeData+randomData
      console.log(this.token)

  }

  
}
</script>

<style scoped lang="less">
*{
  font-size:20px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  
}

.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  

}


.one{
  display: flex;
  flex-direction: row;
  width:1000px;
  border: 2px solid grey;
  border-radius: 5px;
}

.two{
  width:1000px;
}

.ask{
  border: 2px solid grey;
  width:1000px;
  font-size: 20px;
  border-radius: 5px;
}
.request{

  margin:20px;
  padding: 5px 10px ;
  background-color: rgb(153, 153, 153);
  border-radius: 5px;
  float: left;
  display: block;
  max-width: 500px;
  word-wrap: break-word;
  text-align: left;

}
.response{

  margin:20px;
  padding: 5px 10px ;
  background-color: rgb(211, 231, 192);
  border-radius: 5px;
  float: right;
  display: block;
  max-width: 500px;
  word-wrap: break-word;
  text-align: left;

}


</style>
